import * as React from 'react';
import { createElement } from 'react';
import { SetterHoc } from '../../_setters/SetterHoc';
import './index.less';

interface ImgSelectSetterProps {
  value: { title: string; url: string };
  items: Array<{ title?: string; url?: string; mainColor?: string }>;
  onChange: (val: number) => void;
}

export const ImgSelectSetterFun: React.FC<ImgSelectSetterProps> = (props) => {
  const { onChange, value, items } = props;

  const select = (i) => {
    onChange(i);
  };
  return (
    <div className="imgSelectSetter">
      {items.map((i) => {
        // 图片背景主色
        const RGB = i.mainColor.match(/\d+/g).map(Number);
        let color = 'rgb(/60%)'.replace('(', `(${RGB.join(' ')} `);
        return (
          <div
            style={{ backgroundColor: i.title === '默认' ? '#eee' : color }}
            className={i.title === value.title ? 'imgItem active' : 'imgItem'}
            onClick={() => {
              select(i);
            }}
          >
            <img src={i.url} alt="" />
            <div className="title">{i.title}</div>
          </div>
        );
      })}
    </div>
  );
};

export const ImgSelectSetter = SetterHoc(ImgSelectSetterFun);
